<template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button>
      </el-form-item>

      <el-form-item style="float: right;" label="" v-if="isAuth('hotel:hotelseller:list')">
        <el-select
          multiple
          collapse-tags
          clearable
          style="width:180px;"
          v-model="sellerIds"
          filterable
          remote
          reserve-keyword
          @change="selectSeller"
          placeholder="商家名称"
          :remote-method="remoteMethod"
          :loading="loadingsa"
        >
          <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
      <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
      </el-table-column>
<!--      <el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
        label="请求方法">
      </el-table-column> -->
      <el-table-column prop="sellername" header-align="center" align="center" label="所属商家" width="120" >
      </el-table-column>
      <el-table-column prop="username" header-align="center" align="center" label="用户名" width="120" >
      </el-table-column>
      <el-table-column prop="operation" header-align="center" align="center" label="用户操作" width="120" >
      </el-table-column>
      <el-table-column prop="params" header-align="left" align="left" :show-overflow-tooltip="true"
        label="请求参数">
        <template slot-scope="scope">
          <span>{{scope.row.params?scope.row.params:'【'+scope.row.username+'】'+scope.row.operation}}</span>
        </template>

      </el-table-column>
      <el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)" width="150" >
      </el-table-column>
      <el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址">
      </el-table-column>
      <el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间">
      </el-table-column>

    </el-table>

    <div style="margin-top: 20px;float: left;">
      <el-form :inline="true" :model="clearLog" @keyup.enter.native="clearLogBtn()">
        <el-form-item>
          <el-radio-group v-model="clearLog.radio1">
            <el-radio-button label="输入"></el-radio-button>
            <el-radio-button label="自选"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="保留" v-show="clearLog.radio1 == '输入'" style="display: none;">
          <el-input style="width: 80px;" v-model="clearLog.day" placeholder="天" clearable></el-input>
        </el-form-item>
        <el-form-item label="天内的日志" v-show="clearLog.radio1 == '输入'" style="display: none;">
        </el-form-item>

        <!-- 自选 -->
        <el-form-item label="清空" v-show="clearLog.radio1 == '自选'" style="display: none;">
          <el-date-picker
            v-model="otherDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="的日志" v-show="clearLog.radio1 == '自选'" style="display: none;">
        </el-form-item>

        <el-form-item>
          <el-button @click="clearLogBtn()">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        clearLog:{
          day: 30,
          radio1:'输入',
          startTime:'',
          endTime:'',
        },
        otherDate:'',
        dataForm: {
          key: ''
        },
         sellerIds: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        loadingsa:false,
       platformSeller:[],
        totalPage: 0,
        dataListLoading: false,
        selectionDataList: []
      }
    },
    created() {
      this.getDataList();
			this.remoteMethod("");
    },
    mounted:function(){
      this.$http({
        url: this.$http.adornUrl('/sys/config/search_clear_log'),
        method: 'get',
        params: this.$http.adornParams({
          ...this.clearLog
        })
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.clearLog.day = data.entity.paramValue
        }
      })
    },
    methods: {

      selectSeller(id, value) {
        this.getDataList();
      },
      clearLogBtn(){
        if(this.clearLog.radio1 == '自选'){
          if(this.otherDate == ''){
            this.$message({
              message: '请选择日期',
              type: 'info',
            })
            return false
          }
          const start = Date.parse(new Date(this.otherDate[0])) / 1000;
          const end = Date.parse(new Date(this.otherDate[1])) / 1000;
          this.clearLog.startTime = start;
          this.clearLog.endTime = end;
        }

        if(this.clearLog.radio1 == '输入'){
          if(!this.clearLog.day){
            this.$message({
              message: '请输入天数',
              type: 'info',
            })
            return false
          }
        }

        // 发起请求
        this.$http({
          url: this.$http.adornUrl('/sys/log/clear_log'),
          method: 'get',
          params: this.$http.adornParams({
            ...this.clearLog
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '执行成功',
              type: 'success',
            })
            this.getDataList();
          } else {
            this.$message({
              message: data.msg,
              type: 'info',
            })
          }
        })

      },
      //加载平台商家数据
      remoteMethod(query) {
        if(this.isAuth('hotel:hotelseller:list')){
          this.loadingsa = true;
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
            method: "get",
            params: this.$http.adornParams({
              sellerName: query
            })
          }).then(({ data }) => {
            this.loadingsa = false;
            if (data && data.code === 0) {
              this.platformSeller = data.page.list;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      },
      // 获取数据列表
      getDataList() {
         var ids = '';
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ',';
          });
          ids = ids.substring(0, ids.length - 1);
        }

        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/log/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'sellerId': ids
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      }
    }
  }
</script>
